<template>
  <div class="tag-content w-p-100 h-p-100 flex">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="1210"
      height="164"
      viewBox="0 0 1210 164"
      fill="none"
    >
      <rect
        x="0"
        y="0"
        width="1210"
        height="164"
        fill="url(#pattern_fill_ddc1ccce-98ba-498f-bfd6-88bb13827769)"
      ></rect>
      <rect
        x="265"
        y="47"
        width="3"
        height="47"
        fill="url(#pattern_fill_5dbe6691-b435-4d15-b084-994c42ee7350)"
      ></rect>
      <g :opacity="active == 0 ? 1 : 0.8">
        <text x="100" y="80" class="cursor-pointer" font-family="Verdana" font-size="26" :fill="active == 0 ? '#00F0FF':'#fff'" @click="changeSelect(0)">
          {{ configData[0]?.title }}
        </text>
      </g>
      <g :opacity="active == 1 ? 1 : 0.8">
        <text x="309" y="80" class="cursor-pointer" font-family="Verdana" font-size="26" :fill="active == 1 ? '#00F0FF':'#fff'" @click="changeSelect(1)">
            {{ configData[1]?.title }}
        </text>
      </g>
      <g :opacity="active == 2 ? 1 : 0.8">
        <text
          x="550"
          y="50"
          class="cursor-pointer"
          font-family="Verdana"
          font-size="26"
          :fill="active == 2 ? '#00F0FF':'#fff'"
          @click="changeSelect(2)"
        >
        {{ configData[2]?.title }}
        </text>
      </g>
      <rect
        x="526"
        y="28"
        width="16"
        height="30"
        fill="url(#pattern_fill_a4c18eba-a61f-431e-a16a-eece63a228cb)"
      ></rect>
      <rect
        x="668"
        y="26"
        width="19"
        height="32"
        fill="url(#pattern_fill_4cb2f25a-8150-427b-91f3-c3ea7c13625d)"
      ></rect>
      <g :opacity="active == 3 ? 1 : 0.8">
        <text x="798" y="80" class="cursor-pointer" font-family="Verdana" font-size="26" :fill="active == 3 ? '#00F0FF':'#fff'" @click="changeSelect(3)">
            {{ configData[3]?.title }}
        </text>
      </g>
      <rect
        x="938"
        y="47"
        width="3"
        height="47"
        fill="url(#pattern_fill_a40f84ef-13d8-4767-a2a8-09fa2da407bf)"
      ></rect>
      <g :opacity="active == 4 ? 1 : 0.8">
        <text x="982" y="80" class="cursor-pointer" font-family="Verdana" font-size="26" :fill="active == 4 ? '#00F0FF':'#fff'" @click="changeSelect(4)">
            {{ configData[4]?.title }}
        </text>
      </g>
      <defs>
        <pattern
          id="pattern_fill_ddc1ccce-98ba-498f-bfd6-88bb13827769"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use
            transform="translate(0, 0) scale(0.0008264462809917355, 0.006097560975609756) rotate(0)"
            xlink:href="#image0"
          />
        </pattern>

        <image
          id="image0"
          width="1210"
          height="164"
          xlink:href=""
        />

        <pattern
          id="pattern_fill_5dbe6691-b435-4d15-b084-994c42ee7350"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use
            transform="translate(0, 0) scale(0.3333333333333333, 0.02127659574468085) rotate(0)"
            xlink:href="#image1"
          />
        </pattern>

        <image
          id="image1"
          width="3"
          height="47"
          xlink:href=""
        />

        <pattern
          id="pattern_fill_a4c18eba-a61f-431e-a16a-eece63a228cb"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use
            transform="translate(0, 0) scale(0.0625, 0.03333333333333333) rotate(0)"
            xlink:href="#image2"
          />
        </pattern>

        <image
          id="image2"
          width="16"
          height="30"
          xlink:href=""
        />

        <pattern
          id="pattern_fill_4cb2f25a-8150-427b-91f3-c3ea7c13625d"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use
            transform="translate(0, 0) scale(0.05263157894736842, 0.03125) rotate(0)"
            xlink:href="#image3"
          />
        </pattern>

        <image
          id="image3"
          width="19"
          height="32"
          xlink:href=""
        />

        <pattern
          id="pattern_fill_a40f84ef-13d8-4767-a2a8-09fa2da407bf"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use
            transform="translate(0, 0) scale(0.3333333333333333, 0.02127659574468085) rotate(0)"
            xlink:href="#image1"
          />
        </pattern>
      </defs>
    </svg>
  </div>
</template>

<script setup>
import { ref } from "vue";

const prop = defineProps({
    configData: {
        Type: Array,
        default: () => []
    }
})

const emit = defineEmits(['change'])
const active = ref(2)
const changeSelect = (index) => {
    active.value = index
    emit("change",index)
}
</script>

<style lang="scss" scoped>

</style>